@using MyCompanyName.AbpZeroTemplate.Localization
<div ng-controller="common.views.organizationUnits.index as vm">
    <div class="row margin-bottom-5">
        <div class="col-xs-12">
            <div class="page-head">
                <div class="page-title">
                    <h1>
                        <span>@L("OrganizationUnits")</span> <small>@L("OrganizationUnitsHeaderInfo")</small>
                    </h1>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption">
                        <span class="caption-subject bold uppercase">
                            @L("OrganizationTree")
                        </span>
                    </div>
                    <div class="actions">
                        <a ng-if="vm.permissions.manageOrganizationTree" ng-click="vm.organizationTree.addUnit(null)" class="btn btn-circle btn-default">
                            <i class="fa fa-plus"></i> @L("AddRootUnit")
                        </a>
                    </div>
                </div>
                <div class="portlet-body">
                    <div id="OrganizationUnitEditTree"></div>
                    <div ng-if="!vm.organizationTree.unitCount" class="text-muted">
                        @L("NoOrganizationUnitDefinedYet")
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption">
                        <span class="caption-subject bold uppercase">
                            @L("Members")
                            <span ng-if="vm.organizationTree.selectedOu.displayName">: {{vm.organizationTree.selectedOu.displayName}}</span>
                        </span>
                    </div>
                    <div class="actions" ng-if="vm.organizationTree.selectedOu.id">
                        <a ng-if="vm.permissions.manageMembers" ng-click="vm.members.openAddModal()" class="btn btn-circle btn-default">
                            <i class="fa fa-plus"></i> @L("AddMember")
                        </a>
                    </div>
                </div>
                <div class="portlet-body">
                    <div ng-if="vm.organizationTree.selectedOu.id" ui-grid="vm.members.gridOptions" ui-grid-pagination ui-grid-resize-columns dir=@(CultureHelper.IsRtl ? "rtl" : "")></div>
                    <div ng-if="!vm.organizationTree.selectedOu.id" class="text-muted">
                        @L("SelectAnOrganizationUnitToSeeMembers")
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>